<template>
  <div class="activity-info-card">
    <a-card
      class="info-container"
      :title="title || 'Activity Infomation'"
      :bordered="false"
    >
      <div class="base-info-container">
        <div class="left-container">
          <p>ID</p>
          <p>Name</p>
          <p>Start</p>
          <p>End</p>
          <p>Profile</p>
        </div>
        <div class="right-container">
          <p>{{ activityId || -1 }}</p>
          <p>{{ activityName || "暂无" }}</p>
          <p>{{ activityStart || "暂无" }}</p>
          <p>{{ activityEnd || "暂无" }}</p>
          <p>{{ activityProfile || "暂无" }}</p>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    activityId: Number,
    activityName: String,
    activityLocation: String,
    activityStart: Number,
    activityEnd: Number,
    activityProfile: String,
    activityKind: String,
    activityPic: String,
    joinNum: Number,
    publisherId: Number,
  },
  data() {
    return {};
  },
};
</script>

<style lang="less" scope>
.center() {
  align-items: center;
  justify-content: center;
}
.activity-info-card {
  padding: 30px;
  background: #ececec;

  .avatar-container {
    width: 100%;
    display: flex;
    .center();
  }

  .info-container {
    width: 100%;

    .base-info-container {
      margin: 20px 0 0 0;
      display: flex;
      @media (max-width: 960px) {
        & {
          flex-direction: column;
        }
      }
      .left-container {
        width: 20%;
        margin-right: 10%;
      }
      .right-container {
        width: 70%;
      }
    }
  }
}
</style>